<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>服务器日志查询</title>
  <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
  <link href="../static/layui/css/layui.css" rel="stylesheet">
  <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
  <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
  <style>
    .layui-tab-content{
        height: 100vh;
    }
    .layui-layout-admin .layui-body {
		position: absolute;
		top: 60px;
		/* padding-bottom: 44px; */
	}
  </style>
</head>
<body>
<div style="text-align: center; position: absolute margin: auto">
<h3>日志查询</h3>
<br></br>
</div>
<div class="layui-form" action="" lay-filter="demo-val-filter">
  <div class="layui-row layui-col-space8">
	<div class="layui-col-md4" style="margin-left: 60px">
     <div class="layui-input-group">
      <div class="layui-input-split">
        主机IP
      </div>
      <input type="text" placeholder="" class="layui-input" name="Ip" style="margin-left: 15px">
    </div>
    </div>
  
    <div class="layui-col-md4" style="margin-left: 60px">
     <div class="layui-input-group">
      <div class="layui-input-split">
        源IP
      </div>
      <input type="text" placeholder="" class="layui-input" name="SrcIP" style="margin-left: 15px">
    </div>
    </div>
	
    <div class="layui-col-md4" style="margin-left: 60px">
     <div class="layui-input-group">
      <div class="layui-input-split layui-input-prefix">
        目的IP
      </div>
      <input type="text" placeholder="" class="layui-input" name="DstIP" style="margin-left: 15px">
    </div>
    </div>
	
	<div class="layui-col-md4" style="margin-left: 60px">
     <div class="layui-input-group">
      <div class="layui-input-split layui-input-prefix">
        源端口
      </div>
      <input type="text" placeholder="" class="layui-input" name="SrcPort">
    </div>
    </div>
	
	<div class="layui-col-md4" style="margin-left: 60px">
     <div class="layui-input-group">
      <div class="layui-input-split layui-input-prefix">
        目的端口
      </div>
      <input type="text" placeholder="" class="layui-input" name="DstPort">
    </div>
    </div>
	
	<div class="layui-col-md4" style="margin-left: 10px">	
	<label class="layui-form-label">动作</label>
	  <div class="layui-input-inline">
		<select name="Action" lay-search>
		  <option value="">直接选择或搜索</option>
		  <option value="PERMIT">PERMIT</option>
		  <option value="DENY">DENY</option>
		</select>
	</div>
    </div>
	
	<div class="layui-form-item" style="margin-left: 25px">
		<label class="layui-form-label">产生时间</label>
	   <div class="layui-inline" id="ID-laydate-range">
		<div class="layui-input-inline">
		  <input type="text" autocomplete="off" id="ID-laydate-start-date" class="layui-input" placeholder="开始时间" name="start_time">
		</div>
		<div class="layui-form-mid">-</div>
		<div class="layui-input-inline">
		  <input type="text" autocomplete="off" id="ID-laydate-end-date" class="layui-input" placeholder="结束时间" name="end_time">
		</div>
	   </div>
	   
		<button class="layui-btn layui-bg-blue layui-btn-radius" lay-submit lay-filter="searchlog" style="margin-left: 70px" lay-filter="refresh">
			<i class="layui-icon">&#xe615;</i>查&emsp;询
		</button>
		<button id="claerset" type="reset" class="layui-btn layui-btn-primary">重置</button>
	</div>
	
	
  </div>
</div>
 

<div style="padding: 16px;"> 
  <table class="layui-hide" id="test" lay-filter="test"></table>
</div>
 
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
	 <button class="layui-btn layui-btn-sm" lay-event="getAllData">导出全部</button>
</div>
</script>
<script type="text/html" id="barDemo">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
  </div>
</script>  
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="../static/layui/layui.js"></script>
<script>
layui.use(['table', 'dropdown', 'form'], function(){
  var table = layui.table;
  var dropdown = layui.dropdown;
  var form = layui.form;
  var laydate = layui.laydate;
  var $ = layui.$;
  // 清空重置
  $('#claerset').on('click', function(){
    form.val('demo-val-filter', {
      "Ip": "", // "name": "value"
      "SrcIP": "",
	  "DstIP": "",
	  "SrcPort": "",
	  "DstPort": "",
	  "Action": "",
	  "start_time": "",
	  "end_time": "",
    });
  });
  
  // 日期范围 - 左右面板独立选择模式
  laydate.render({
    elem: '#ID-laydate-start-date',
    type: 'datetime',
	theme: '#00BFFF',
    shortcuts: [
		{
			text: "今日零点",
			value: function(){
			  var now = new Date();
			  now.setHours(0, 0, 0, 999);
			  return now;
			}
		}
	],
	done: function(value){ 
		values = value.split(" - ");
		console.log("时间1:", values);
	}
  });
  laydate.render({
    elem: '#ID-laydate-end-date',
    type: 'datetime',
	max:  '{:date("Y-m-d 23:59:59")}',
	theme: '#00BFFF',
	shortcuts: [
		{
			text: "最大时间",
			value: function(){
			  var now = new Date();
			  now.setHours(23, 59, 59, 999);
			  return now;
			}
		}
	],
	done: function(value){ 
		values = value.split(" - ");
		console.log("时间2:", values);
	}
  });
  /*
  */
  // 创建渲染实例
  var dataTable = table.render({
    elem: '#test',
	method:'post',
	height: 100,
    url: '/search', // 此处为静态模拟数据，实际使用时需换成真实接口
    toolbar: '#toolbarDemo',
    defaultToolbar: ['filter', 'exports', 'print', {
      title: '提示',
      layEvent: 'LAYTABLE_TIPS',
      icon: 'layui-icon-tips'
    }],
    height: 'full-35', // 最大高度减去其他容器已占有的高度差
    css: [ // 重设当前表格样式
      '.layui-table-tool-temp{padding-right: 145px;}',
	  '.layui-table td, .layui-table th {font-size: 12px;}',
	  //'.layui-table-cell {height: auto ;white-space: normal;}', // 表格数据和表头全部显示
    ].join(''),
    cellMinWidth: 80,
    totalRow: true, // 开启合计行
    page: true,
	limits: [10, 20, 30, 50, 100],
    request: {
        pageName: 'pageNum' //页码的参数名称，默认：page
        ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
    },
    cols: [[
      {type: 'checkbox', fixed: 'left'},
      {field:'id', fixed: 'left', title: 'ID', width: 5, sort: true},
	  {field:'systemTime', title: '系统时间', width: 160, sort: true},
	  {field:'Ip', title: '主机IP', width: 130},
	  {field:'GenTime', title: '产生时间', width: 160, sort: true},
	  {field:'SrcIP', title: '源IP', width: 120, sort: true},
	  {field:'DstIP', title: '目的IP', width: 120},
	  {field:'Protocol', title: '协议'},
	  {field:'SrcPort', title: '源端口'},
	  {field:'DstPort', title: '目的端口'},
	  {field:'PolicyID', title: '策略ID'},
	  {field:'Action', title: '动作'},
	  {field:'Content', title: '内容'},
	  {field:'EvtCount', title: '事件内容'},
      //{fixed: 'right', title:'操作', width: 134, minWidth: 125, toolbar: '#barDemo'}
    ]],
    parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
      return {
        "code": res.code, //解析接口状态
        "msg": res.message, //解析提示文本
        "count": res.total, //解析数据长度
        "data": res.data //解析数据列表
      };
    },
    done: function(){
      var id = this.id;
      // 下拉按钮测试
      dropdown.render({
        elem: '#dropdownButton', // 可绑定在任意元素中，此处以上述按钮为例
        data: [{
          id: 'add',
          title: '添加'
        },{
          id: 'update',
          title: '编辑'
        },{
          id: 'delete',
          title: '删除'
        }],
        // 菜单被点击的事件
        click: function(obj){
          var checkStatus = table.checkStatus(id)
          var data = checkStatus.data; // 获取选中的数据
          switch(obj.id){
            case 'add':
              layer.open({
                title: '添加',
                type: 1,
                area: ['80%','80%'],
                content: '<div style="padding: 16px;">自定义表单元素</div>'
              });
            break;
            case 'update':
              if(data.length !== 1) return layer.msg('请选择一行');
              layer.open({
                title: '编辑',
                type: 1,
                area: ['80%','80%'],
                content: '<div style="padding: 16px;">自定义表单元素</div>'
              });
            break;
            case 'delete':
              if(data.length === 0){
                return layer.msg('请选择一行');
              }
              layer.msg('delete event');
            break;
          }
        }
      });
 
      // 行模式
      dropdown.render({
        elem: '#rowMode',
        data: [{
          id: 'default-row',
          title: '单行模式（默认）'
        },{
          id: 'multi-row',
          title: '多行模式'
        }],
        // 菜单被点击的事件
        click: function(obj){
          var checkStatus = table.checkStatus(id)
          var data = checkStatus.data; // 获取选中的数据
          switch(obj.id){
            case 'default-row':
              table.reload('test', {
                lineStyle: null // 恢复单行
              });
              layer.msg('已设为单行');
            break;
            case 'multi-row':
              table.reload('test', {
                // 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
                lineStyle: 'height: 95px;' 
              });
              layer.msg('即通过设置 lineStyle 参数可开启多行');
            break;
          }
        }
      });
    },
    error: function(res, msg){
      console.log(res, msg)
    }
  });
  // 全部导出
  table.on('toolbar(test)', function(obj){
	var options = obj.config; // 
	var checkStatus = table.checkStatus(options.id); 
	console.log(obj);
	console.log("title", obj.config.title)
	console.log("tb id===", dataTable.config.id)
	// 根据不同的事件名进行相应的操作
	switch(obj.event){
	  case 'getAllData':
		layer.msg('导出中', {icon: 1});
		// 获取查询表单数据
		var fmdata = form.val('demo-val-filter');
		console.log("表单取值:", fmdata)
		fmdata.pageNum = '1';
		fmdata.pageSize = '10000'
		$.ajax({
			url: '/search', // 请求的URL
			type: 'POST', // 请求类型，可以是GET或POST
			data: fmdata,
			dataType: 'json', // 预期服务器返回的数据类型
			success: function(res) {
				// 请求成功时的回调函数
				table.exportFile(dataTable.config.id, res.data, 'xls');
				console.log("导出完成")
			},
			error: function(xhr, status, error) {
				// 请求失败时的回调函数
				console.log(xhr.responseText);
			}
		});
	  break;
	};
	});

  form.on('submit(searchlog)', function(data) {
	// 获取输入框的值
	// var dataf = data.field;
	let dataf = Object.assign({}, data.field);
	// dataf.pageNum = '1';
	// dataf.pageSize = '10';
	console.log(dataf);
	console.log('查询中..');
	table.reload('test', {
		page: {curr: 1},
		where: dataf,
	});
	return false
  });
});
</script>
</body>
</html>